// components/covid-chart/covid-chart.js
import chart_data from '../../libs/data_covid'

Component({
  properties: {
    covidFlag: {
      type: Number,
      value: 0,
    }
  },
  data: {
    chartTitle: {}
  },
  ready: function (params) {
    // this.initLineChart()
  },
  methods: {
    //初始化LineChart
    initLineChart(lineData) {
      this.chartComponent = this.selectComponent('#line-chart');
      this.chartComponent.init((canvas, width, height, F2) => {
        //此处data数据可通过 异步获取数据
        const chart = new F2.Chart({
          el: canvas,
          width,
          height,
          animate: false,
          appendPadding: [17, 15, 15, 15]
        });
        const dataArr = this.dealLineData(lineData)
        var line_data = dataArr[0],
          tickCount = dataArr[1],
          covidItem = dataArr[2],
          colorMap = dataArr[3]
        // console.log(dataArr, line_data.length, line_data[0])
        this.initLineData(chart, line_data, tickCount)
        this.initLinePoint(chart, colorMap)
        this.initToolTip(chart)
        this.initLegend(chart)
        chart.render();
        this.setDefaultToolTip(chart, covidItem)
        return chart;
      })
    },
    dealLineData(lineData) {
      const data_convid = lineData == null ? chart_data.data_convid : lineData
      //计算标签数量
      var evenNum = data_convid.length % 3 == 0
      var tickCount = evenNum ? data_convid.length / 3 : data_convid.length / 3
      //处理数据
      var covidFlag = this.properties.covidFlag
      // console.log('dealLineData---', data_convid, covidFlag)
      var covidChartData = chart_data.getCovidChartData(data_convid, covidFlag)
      var covidData = covidChartData[0],
        colorMap = covidChartData[1], //设置标签颜色map
        covidTitle = covidChartData[2] //图表的标题
      //获取第一项
      const covidItem = covidData[covidData.length - 1]
      this.setData({
        chartTitle: covidTitle
      })
      return [covidData, tickCount, covidItem, colorMap]
    },
    //设置数据
    initLineData(chart, line_data, tickCount) {
      // chart.interaction('pan');
      chart.source(line_data, {
        case_date: {
          tickCount: tickCount
        }
      });
      // 坐标轴文本旋转
      chart.axis('case_date', {
        label: {
          rotate: -Math.PI / 4,
          textAlign: 'end',
          textBaseline: 'middle'
        }
      });
    },
    //设置线条和点
    initLinePoint(chart, colorMap) {
      chart.line().position('case_date*value').color('type',
        function (type) {
          return colorMap.get(type)
        }).style({
        lineWidth: 1,
      });
      chart.point().position('case_date*value').color('type',
        function (type) {
          return colorMap.get(type)
        }).style({
        lineWidth: 1,
        stroke: '#fff'
      });
    },
    //设置提示文本
    initToolTip(chart) {
      chart.tooltip({
        showTitle: true,
        offsetY: 30,
        showCrosshairs: true, //是否显示辅助线
        showItemMarker: true, //显示图例里面的颜色
        showTooltipMarker: false, //没看到效果
        layout: 'vertical',
        background: {
          radius: 3,
          fill: 'gray',
          padding: [3, 5]
        },
        titleStyle: {
          fontSize: 13,
          fill: '#fff',
          textAlign: 'start',
          textBaseline: 'top'
        },
        onShow(ev) {
          const {
            items
          } = ev;
          // console.log("onShow", ev)
          // items.splice(2, 2); // 去掉最后两项
        }
      });
    },
    //设置图例
    initLegend(chart) {
      chart.legend({
        position: 'top',
        align: 'right',
        itemWidth: null // 图例项按照实际宽度渲染
      });
    },
    //设置默认选中提示文本
    setDefaultToolTip(chart, covidItem) {
      // 要展示 tooltip 的数据
      const point = chart.getPosition(covidItem);
      // chart.showTooltip(point); // 展示该点的 tooltip
    }
  }
})